<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backTo()"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">交易记录</view>
		</view>	
		<view class="bg_box">
			<image class="bg01" src="/static/bg05.png" mode="widthFix"></image>
			<view class="bg_content">
				<block v-for="(item, index) in list" :key="index">
					<view class="records_list">
						<view class="text_box">
							<view class="title">分期覆约 第{{item.cur_stage}}/{{item.loans_num}}期</view>
							<view class="time">{{item.pay_date||'暂无'}}</view>
						</view>
						<view class="text_box">
							<view class="money">￥{{item.money}}</view>
							<view class="text"> ({{item.car_no||'暂无'}}) 
						
							   <text v-if="item.status == 0">待覆约</text>
							   <text v-else-if="item.status == 0">覆约中</text>
							   <text v-else>覆约成功</text>
							</view>
						</view>
					</view>
				</block>
				
				<block v-if="empty">
					<view style="margin-top: 20vw;" v-if="list.length==0">
						<u-empty mode="data" iconSize="120" ></u-empty>
					</view>
				</block>
				<view class="clear_box04"></view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				scrrol:false,
				info:'',
				empty_text : '暂无信息',
				load_type : 'more',
				empty : 0,
				list : [],
				
			}
		},
		onReachBottom() {
		  this.loadData();
		},
		onLoad() {
           this.loadData();
		},
		methods: {
			loadData(){
				if(this.load_type == 'loading' || this.load_type == 'no_more'){
					return;
				}
			    let url = this.site_url + 'api/auth/member/my_stage_list?page='+this.page;
				this.areq(url).then(res=>{
					this.empty = 1;
					 if(res.code == 1){
						 this.page++; 
						 this.load_type = 'more';
						 this.list = [...this.list,...res.data];
					 }else{
						this.load_type = 'no_more';
					}
					
				})
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				this.$r(url);
			},
		},
		onPageScroll: function(Object) {
			if (Object.scrollTop > 28) {
				this.scrrol = true;
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
			}
		},
	
	}
</script>

<style>
	
	.header{
		background-color: transparent !important;
	}
	
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.scrrolHeader{
		background-color: #F9E9E3 !important;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.records_list{
		width: 100%;
		margin-top: 4%;
		background-color: #fff;
		padding: 5vw 4vw;
		border-radius: 3vw;
		display: flex;
		align-items: center;
	}
	
	.records_list .text_box{
		flex: 1;
	}
	
	.records_list .text_box .title{
		font-size: 4vw;
		color: #333;
		font-weight: bold;
	}
	
	.records_list .text_box .time{
		font-size: 3.5vw;
		color: #999999;
		margin-top: 2vw;
	}
	
	.records_list .text_box .money{
		font-size: 3.8vw;
		color: #333;
		font-weight: bold;
		text-align: right;
	}
	
	.records_list .text_box .text{
		font-size: 3.5vw;
		color: #999999;
		margin-top: 2vw;
		text-align: right;
	}
	
	
	
	
</style>
